import React, { Component } from 'react';
import shop from '../state/home.svg'
import fen from '../state/分类.svg'
import all from '../state/管理.svg'
import car from '../state/cart.svg'
import user from '../state/user.svg'
import './tab.scss'
var i = 0;
class Tab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [
                { name: '店铺', tab: shop },
                { name: '分类', tab: fen },
                { name: '全部商品', tab: all },
                { name: '购物车', tab: car },
                { name: '个人中心', tab: user },
            ]
            // i: 0
        }
    }
    render() {
        // var obj = {
        //     color: "red"
        // }
        return (
            <div className='tabbox'>
                {
                    this.state.arr.map((item, index) => {
                        return (
                            <div className='tab' key={index} onClick={() => { this.handclick(index) }} >
                                {/* style={this.state.arr.i == index ? obj : ''} */}
                                <img src={item.tab} alt="" />
                                <span>{item.name}</span>
                            </div>
                        )
                    })
                }

            </div>
        );
    }
    handclick(index) {
        i = index

        console.log(i)
    }
}

export default Tab;